<template>
  <div style="overflow: hidden">
    <van-sticky>
      <van-nav-bar left-arrow @click-left="onClickLeft" :border="false">
        <template #right>
          <span
            style="display: flex; align-items: center; justify-content: center"
          >
            <van-search
              v-if="currentButton === 'searchContent'"
              shape="round"
              placeholder="请输入商品名称"
              @click="clickSearch"
            />
            <van-icon
              v-else
              name="search"
              @click="clickSearch"
              size="22"
              style="margin-right: 18px"
            />

            <van-icon name="star-o" style="margin-right: 18px" size="22" />
            <van-icon name="chat-o" style="margin-right: 18px" size="22" />
            <van-button
              type="default"
              size="mini"
              round
              color="rgb(247,248,250)"
              style="margin-right: 18px"
            >
              <span style="color: rgb(31, 31, 31); font-weight: bold"
                >拼单</span
              >
            </van-button>
            <van-icon name="ellipsis" style="margin-right: 0" size="22" dot />
          </span>
        </template>
      </van-nav-bar>
    </van-sticky>

    <!-- 商铺的标牌 -->
    <van-card
      center
      :thumb="merchant.avatar"
      class="custom-cell"
      :border="false"
    >
      <!-- 使用 title 插槽来自定义标题 :title="merchant.storeName"-->
      <template #title>
        <h2 class="custom-title">{{ merchant.storeName }}</h2>
      </template>

      <template #desc>
        <div class="label-container">
          <div class="label-item">
            <span class="label-key">评分</span>
            <span class="label-value">{{ merchant.score }}</span>
          </div>
          <van-divider
            vertical
            :style="{ borderColor: '#1989fa', height: '30px' }"
          />
          <div class="label-item">
            <span class="label-key">月售</span>
            <span class="label-value">{{ merchant.monthSale }}</span>
          </div>
          <van-divider
            vertical
            :style="{ borderColor: '#1989fa', height: '30px' }"
          />
          <div class="label-item">
            <span class="label-key">商家自配</span>
            <span class="label-value">约40分钟</span>
          </div>
        </div>
      </template>
    </van-card>
    <!-- 滚动文本 -->
    <van-notice-bar
      color="#1989fa"
      background="#ecf9ff"
      left-icon="volume-o"
      :text="merchant.briefIntroduction"
    />

    <van-divider
      :style="{
        color: '#999',
        borderColor: '#999',
        padding: '0 16px',
        opacity: 0.2,
      }"
    ></van-divider>

    <!--4个菜单栏 -->

    <van-sticky :offset-top="30" @change="onChange" :z-index="99">
      <van-row class="custom-row">
        <van-col
          span="6"
          v-for="(item, index) in menuItems"
          :key="index"
          @click="selectItem(item)"
          :class="{ 'active-item': item === currentMenuItem }"
        >
          <div class="item-container">
            <van-icon :name="item.icon" size="24" />
            <div>{{ item.text }}</div>
          </div>
        </van-col>
      </van-row>
    </van-sticky>

    <!-- 动态组件 -->
    <br />
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import http from "../../utils/http"; //导入异步交互的工件
import { ref, onMounted } from "vue"; //导入特殊的工件
import { useRoute, useRouter } from "vue-router"; //导入接受路由参数的实例

const route = useRoute();
const router = useRouter();
//变量区:
// 1.使用 markRaw 来标记组件，避免它们被当作响应式数据
const menuItems = ref([
  { icon: "home-o", text: "点菜" },
  { icon: "star-o", text: "超优惠" },
  { icon: "comment-o", text: "评价" },
  { icon: "shop-o", text: "商家" },
]);
//2.存放最上方的导航条的搜索按钮
const currentButton = ref("search");
//3.存放其他页面拿过来的商家id
const merchantId = route.query.merchantId;
console.log("接收到的的商家id9009为", merchantId);
//4.存放商家信息
const merchant = ref({});

//5.记录上一个路由的页面
// 从路由对象中获取查询参数 redirect
// const redirect = route.query.redirect;

// console.log("重定向的参数为", redirect);

//变量初始化区：
// 1.给当前选中的菜单项添加样式:如改变被选中的菜单项的背景颜色:初始时候给第一个菜单项设置为选中
const currentMenuItem = ref(menuItems.value[0]);

//方法区:
//1.当菜单栏吸顶时，将搜索按钮变为搜索框
const onChange = (isFixed) => {
  if (isFixed) {
    currentButton.value = "searchContent";
  } else {
    currentButton.value = "search";
  }
};
//2.选择菜单项触发事件:切换对应的组件，以及传递对应的数据
const selectItem = (item) => {
  //将被选中的菜单项的背景颜色进行变更
  currentMenuItem.value = item;
  if (item.text === "点菜") {
    //跳转到点菜的页面
    router.push({
      path: "/business/order-dishes",
      query: {
        merchantId: merchantId,
      },
    });
  } else if (item.text === "超优惠") {
    //跳转到超优惠的页面
    router.push({
      path: "/business/super-deals",
      query: {
        merchantId: merchantId,
      },
    });
  } else if (item.text === "评价") {
    //跳转到评价的页面
    router.push({
      path: "/business/appraise",
      query: {
        merchantId: merchantId,
      },
    });
  } else if (item.text === "商家") {
    //跳转到商家信息的页面
    router.push({
      path: "/business/business-info",
      query: {
        merchantId: merchantId,
      },
    });
  }
};
//路由跳转页面区:
//1.当点击搜索按钮或者搜索框时，跳转到搜索页面
const clickSearch = () => {
  router.push("/search");
};

//2.返回上一个页面:首页
const onClickLeft = () => {
  console.log("返回按钮被点击");
  // router.back();
  router.push("/first");
};
//请求数据区:
//1.根据商家id获取商家的数据
const getBusinessInfoById = async () => {
  try {
    const response = await http.get(`/business/getBusinessById/${merchantId}`);
    merchant.value = response.data.data;
    // console.log("获取到的商家的数据为", response.data.data);
  } catch (error) {
    console.error("商家信息请求错误");
  }
};
//2.根据商家的id获取数据一:获取该商家的菜品
const getDishesListById = async () => {
  try {
    const response = await http.get(
      `/dishes/getDishesByBusinessId/${merchantId}`
    );
    console.log("得到的菜品信息为", response.data.data);
    const redirect = route.query.redirect;

    console.log("重定向的参数为", redirect);
  } catch {
    console.error("菜品请求错误");
  }
};

onMounted(() => {
  if (merchantId) {
    Promise.all([getBusinessInfoById()])
      .then(() => {
        // console.log("执行了所有的请求");
        router.push({
          path: "/business/order-dishes",
          query: {
            merchantId: merchantId,
          },
        });
      })
      .catch((error) => {
        console.error("请求失败", error);
      });
  } else {
    console.error("未能获取商家id");
  }
});
</script>

<style scoped>
::v-deep(.van-nav-bar) {
  background-color: white;
}
/* 商铺整体的样式 */
.custom-cell {
  height: 100px; /* 调整高度 */
}
/* 商铺左边的图标的样式 */

/* 商铺名称的样式 */
.custom-title {
  vertical-align: middle;
  margin-bottom: 5px;
}
/* 上面的4个选项整体的样式 */
.custom-row {
  margin-top: 16px; /* 根据需要调整上边距 */
  /* margin-left: 5px; */
  background: rgb(255, 255, 255);
}

/* 四个选项之间的样式 */
.item-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  height: 100%; /* 使 Flexbox 效果应用于整个容器 */
}
/* 标题下面的标签内容的样式 */
.label-container {
  margin-top: 5px;
  display: flex; /* 启用Flexbox布局 */
  align-items: flex-start; /* 子元素在行内左对齐 */
}

.label-item {
  display: flex; /* 启用Flexbox布局 */
  flex-direction: column; /* 垂直排列key和value */
  align-items: center; /* key和value在行内左对齐 */
  margin-bottom: 0px; /* 给每个label-item添加一些底部间距 */
}

.label-key {
  font-weight: bold; /* 加粗key */
}

.label-value {
  color: #26b2e9; /* 改变value的颜色 */
}
.active-item {
  background-color: #ecf9ff; /* 选中项的背景颜色 */
}
/* 定义 transition 的 CSS 类 */
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s;
}
.slide-enter, .slide-leave-to /* 2.1.8+ */ {
  opacity: 0;
  transform: translateX(100%);
}
</style>